<template>
  <d2-container>
    <el-form :inline="true">
      <!-- <el-form-item label="校区" prop="school">
        <el-select v-model="school" filterable placeholder="请选择校区" @change="changeSchool">
          <el-option
            v-for="item in schoolList"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-radio-group v-model="showType" @change="showTypeChange">
          <el-radio-button label="0">使用情况</el-radio-button>
          <el-radio-button label=1>空闲情况</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="exportExcel" style="float:left">EXCEL导出</el-button>
      </el-form-item>
      <el-radio-group v-model="status" style="margin-left: 50px" @change='changeClass'>
        <el-radio :label="-1" style='margin-top:10px'>待进行</el-radio>
        <el-radio :label="0">进行中</el-radio>
      </el-radio-group>
    </el-form>
    <el-table :data="dayList" border style="width: 68%;display: inline-block;margin-right:1%;position: relative;" stripe="stripe" v-show="showType == 0">
      <el-table-column  prop='hour' label="时间/日期"></el-table-column>
      <el-table-column  label="周一">
        <template v-model="day1" slot-scope="scope" >
          <div v-for="(item, index) in day1[scope.$index].used" 
          :style="{'background-color': item.color}" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px;padding:5px" >
            <p>{{item.name}}</p>
          </div>
        </template>
    </el-table-column>
      <el-table-column  label="周二">
        <template v-model="day2" slot-scope="scope" >
          <div v-for="(item, index) in day2[scope.$index].used" 
          :style="{'background-color': item.color}" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px;padding:5px" >
            <p></p>
          </div></template>
    </el-table-column>
      <el-table-column  label="周三">
        <template v-model="day3" slot-scope="scope" >
          <div v-for="(item, index) in day3[scope.$index].used" 
          :style="{'background-color': item.color}" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px;padding:5px" >
            <p>{{item.name}}</p>
          </div>
        </template>
    </el-table-column>
      <el-table-column  label="周四">
        <template v-model="day4" slot-scope="scope" >
          <div v-for="(item, index) in day4[scope.$index].used" 
          :style="{'background-color': item.color}" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px;padding:5px" >
            <p>{{item.name}}</p>
          </div></template>
    </el-table-column>
      <el-table-column  label="周五">
        <template v-model="day5" slot-scope="scope" >
          <div v-for="(item, index) in day5[scope.$index].used" 
          :style="{'background-color': item.color}" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px;padding:5px" >
            <p>{{item.name}}</p>
          </div></template>
    </el-table-column>
      <el-table-column  label="周六">
        <template v-model="day6" slot-scope="scope" >
          <div v-for="(item, index) in day6[scope.$index].used" 
          :style="{'background-color': item.color}" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px;padding:5px" >
            <p>{{item.name}}</p>
          </div></template>
    </el-table-column>
      <el-table-column  label="周日">
        <template v-model="day7" slot-scope="scope" >
          <div v-for="(item, index) in day7[scope.$index].used" 
          :style="{'background-color': item.color}" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px;padding:5px" >
            <p>{{item.name}}</p>
          </div>
        </template>
    </el-table-column>
    </el-table>
    <el-table :data="dayList" border style="width: 68%;display: inline-block;margin-right:1%;position: relative;" stripe="stripe" v-show="showType == 1">
      <el-table-column  prop='hour' label="时间/日期"></el-table-column>
      <el-table-column  label="周一">
        <template v-model="day1" slot-scope="scope" >
          <div v-for="(item, index) in day1[scope.$index].unUsed" 
          :style="{'width': (1/day1[scope.$index].unUsed.length)*100+'%','background-color': item.color}" style="height: 100%;line-height: 14px;text-align: center;box-sizing: border-box;margin-bottom: 5px;display: inline-block;padding:5px" >
            {{item.name}}
          </div>
        </template>
    </el-table-column>
      <el-table-column  label="周二">
        <template v-model="day2" slot-scope="scope" >
          <div v-for="(item, index) in day2[scope.$index].unUsed" 
          :style="{'width': (1/day2[scope.$index].unUsed.length)*100+'%','background-color': item.color}" style="height: 100%;line-height: 14px;text-align: center;box-sizing: border-box;margin-bottom: 5px;display: inline-block;padding:5px" >
            {{item.name}}
          </div></template>
    </el-table-column>
      <el-table-column  label="周三">
        <template v-model="day3" slot-scope="scope" >
          <div v-for="(item, index) in day3[scope.$index].unUsed" 
          :style="{'width': (1/day3[scope.$index].unUsed.length)*100+'%','background-color': item.color}" style="height: 100%;line-height: 14px;text-align: center;box-sizing: border-box;margin-bottom: 5px;display: inline-block;padding:5px" >
            {{item.name}}
          </div>
        </template>
    </el-table-column>
      <el-table-column  label="周四">
        <template v-model="day4" slot-scope="scope" >
          <div v-for="(item, index) in day4[scope.$index].unUsed" 
          :style="{'width': (1/day4[scope.$index].unUsed.length)*100+'%','background-color': item.color}" style="height: 100%;line-height: 14px;text-align: center;box-sizing: border-box;margin-bottom: 5px;display: inline-block;padding:5px" >
            {{item.name}}
          </div></template>
    </el-table-column>
      <el-table-column  label="周五">
        <template v-model="day5" slot-scope="scope" >
          <div v-for="(item, index) in day5[scope.$index].unUsed" 
          :style="{'width': (1/day5[scope.$index].unUsed.length)*100+'%','background-color': item.color}" style="height: 100%;line-height: 14px;text-align: center;box-sizing: border-box;margin-bottom: 5px;display: inline-block;padding:5px" >
            {{item.name}}
          </div></template>
    </el-table-column>
      <el-table-column  label="周六">
        <template v-model="day6" slot-scope="scope" >
          <div v-for="(item, index) in day6[scope.$index].unUsed" 
          :style="{'width': (1/day6[scope.$index].unUsed.length)*100+'%','background-color': item.color}" style="height: 100%;line-height: 14px;text-align: center;box-sizing: border-box;margin-bottom: 5px;display: inline-block;padding:5px" >
            {{item.name}}
          </div></template>
    </el-table-column>
      <el-table-column  label="周日">
        <template v-model="day7" slot-scope="scope" >
          <div v-for="(item, index) in day7[scope.$index].unUsed" 
          :style="{'width': (1/day7[scope.$index].unUsed.length)*100+'%','background-color': item.color}" style="height: 100%;line-height: 14px;text-align: center;box-sizing: border-box;margin-bottom: 5px;display: inline-block;padding:5px" >
            {{item.name}}
          </div>
        </template>
    </el-table-column>
    </el-table>




        <el-table :data="classroomList" border style="width: 10%;display: inline-block;position: relative;vertical-align: top" stripe="stripe">
            <el-table-column label="教室列表">
                <template slot-scope="scope">
                <div :style="{'background-color': classroomList[scope.$index].color}" style='padding:10px'>{{classroomList[scope.$index].name}}</div>
            </template>
       </el-table-column>
     </el-table>
  </d2-container>
</template>

<script>
import request from "@/plugin/axios";
import { mapState } from "vuex";
import excel from "@/libs/util.excel"

export default {
  data() {
    return {
      // schoolList: [],
      school:undefined,
      status:-1,
      showType:0,
      classroomList:[],
      dayList : [{hour:'8:00'},{hour:'8:30'},{hour:'9:00'},{hour:'9:30'},{hour:'10:00'},{hour:'10:30'},{hour:'11:00'},{hour:'11:30'},{hour:'12:00'},{hour:'12:30'},{hour:'13:00'},{hour:'13:30'},{hour:'14:00'},{hour:'14:30'},{hour:'15:00'},{hour:'15:30'},{hour:'16:00'},{hour:'16:30'},{hour:'17:00'},{hour:'17:30'},{hour:'18:00'},{hour:'18:30'},{hour:'19:00'},{hour:'19:30'},{hour:'20:00'}],
      day1 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day2 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day3 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day4 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day5 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day6 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day7 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      color : ['#A1D1FB','#B0F8C4','#F8B0D7','#F8BDB0','#DDB0F8'],
      classList : [],
    };
  },
  computed: {
    ...mapState("d2admin/user", ["info"])
  },
  methods: {
      changeSchool(){
          // let school = this.school
          //     school = this.schoolList.map(e =>{return e._id})
          this.getClassroomList()
      },
      changeClass(){
        this.day1 =  [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.day2 =  [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.day3 =  [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.day4 =  [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.day5 =  [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.day6 =  [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.day7 =  [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.classList = []
        this.classroomList = []
        this.getClassroomList()
      },

      getclassList(){
        let school = this.school
        request({
          url : '/classArrange/getClassList',
          method:'post',
          data : {school:school,status:this.status}
        }).then(res=>{
          if (res.code == 200){
            this.classList = res.data
            for (var i = 0 ; i < this.classList.length ; i++){
              let temp = this.classList[i]
              for (var j = 0 ; j < temp.hours.length ;j++){
                let oneHour = temp.hours[j]
                let dayname = 'day' + (j == 0 ? 7 : j)
                for (var k = 0 ; k < oneHour.hours.length ; k++){
                  for (var l = oneHour.hours[k].start - 16 ; l < oneHour.hours[k].end - 16;l++){
                    if (this.$data[dayname][l].used == undefined){
                      this.$data[dayname][l].used = []
                    }
                    
                    if ((this.classList[i].classroom != null) && (this.classList[i].classroom != undefined)){
                      let index = this.$data[dayname][l].unUsed.map(function(e){return e._id}).indexOf(this.classList[i].classroom._id)
                      if (index != -1){
                        this.$data[dayname][l].used.push(this.$data[dayname][l].unUsed[index])
                        this.$data[dayname][l].unUsed.splice(index,1)
                      }
                    }
                    
                    
                  }
                }
              }
            }
            this.dayList.push({})
            this.dayList.splice(this.dayList.length - 1, 1)
          }
        })
      },
    getClassroomList() {
      let school = this.school._id
      request({
        url: "/classArrange/getClassroomList",
        method: "post",
        data: { school: school}
      }).then(res => {
        this.classList = []
        this.classroomList = []
          for(let i =0;i<res.data.length;i++){
            res.data[i].color = this.color[i%5]
            for (let j = 0 ; j < 7 ; j++){
              let dayname = 'day' + (j == 0 ? 7 : j)
              for (let k = 0 ; k < this.$data[dayname].length;k++){
                this.$data[dayname][k].unUsed = []
                console.log(res.data[0])
                for (let l = 0 ; l < res.data.length ; l++){
                  this.$data[dayname][k].unUsed.push(res.data[l])
                }
                
              }
              
            }

          }
          this.classroomList = res.data
          this.dayList.push({})
          this.dayList.splice(this.dayList.length - 1 ,1)
          this.getclassList()
      });
    },


    exportExcel(){
      let columns = [{label:'时间/日期',prop:'date'},{label:'周一',prop:'day1'},{label:'周二',prop:'day2'},{label:'周三',prop:'day3'},{label:'周四',prop:'day4'},{label:'周五',prop:'day5'},{label:'周六',prop:'day6'},{label:'周日',prop:'day7'}]
      let data = []
      let title = ""
      if(this.showType ==0){
        title = this.info.school[0].name + "教室使用情况" + (this.status == 0 ? '(待进行课程)' : '(进行中课程)')
      }else if(this.showType ==1){
        title = this.info.school[0].name + "教室空闲情况" + (this.status == 0 ? '(待进行课程)' : '(进行中课程)')
      }
      for(let i=0;i<this.dayList.length;i++){
        let temp = {}
        temp.date = this.dayList[i].hour
        temp.day1= []
        temp.day2= []
        temp.day3= []
        temp.day4= []
        temp.day5= []
        temp.day6= []
        temp.day7= []
        if(this.showType ==0){
          if(this.day1[i].used != undefined){
            temp.day1 = this.day1[i].used.map(e =>{return e.name})
          }
          if(this.day2[i].used != undefined){
            temp.day2 = this.day2[i].used.map(e =>{return e.name})
          }
          if(this.day3[i].used != undefined){
            temp.day3 = this.day3[i].used.map(e =>{return e.name})
          }
          if(this.day4[i].used != undefined){
            temp.day4 = this.day4[i].used.map(e =>{return e.name})
          }
          if(this.day5[i].used != undefined){
            temp.day5 = this.day5[i].used.map(e =>{return e.name})
          }
          if(this.day6[i].used != undefined){
            temp.day6 = this.day6[i].used.map(e =>{return e.name})
          }
          if(this.day7[i].used != undefined){
            temp.day7 = this.day7[i].used.map(e =>{return e.name})
          }
        }else if(this.showType ==1){
          if(this.day1[i].used != undefined){
            temp.day1 = this.day1[i].unUsed.map(e =>{return e.name})
          }
          if(this.day2[i].used == undefined){
            temp.day2 = this.day2[i].unUsed.map(e =>{return e.name})
          }
          if(this.day3[i].used == undefined){
            temp.day3 = this.day3[i].unUsed.map(e =>{return e.name})
          }
          if(this.day4[i].used == undefined){
            temp.day4 = this.day4[i].unUsed.map(e =>{return e.name})
          }
          if(this.day5[i].used == undefined){
            temp.day5 = this.day5[i].unUsed.map(e =>{return e.name})
          }
          if(this.day6[i].used == undefined){
            temp.day6 = this.day6[i].unUsed.map(e =>{return e.name})
          }
          if(this.day7[i].used == undefined){
            temp.day7 = this.day7[i].unUsed.map(e =>{return e.name})
          }
        }
        data.push(temp)
      }
      excel.export(columns,data,title)
      this.$export.excel({
        title:title,
        columns: columns,
        data: data,
    })
    .then(() => {
      this.$message('导出表格成功')
      })
    },
    showTypeChange(){
    }
  },
  created() {
    this.school = this.info.school[0];
    this.getClassroomList()
  }
};
</script>
